<template>
  <div class="userList">
<!--    <div style="float: left;" class="regDate">-->
<!--      按注册月份搜索: &nbsp;-->
<!--      <el-date-picker-->
<!--          :clearable="false"-->
<!--          v-model="value1"-->
<!--          type="month"-->
<!--          value-format="yyyy-MM"-->
<!--          placeholder="选择月份">-->
<!--      </el-date-picker>-->
<!--      <el-button class="search_button" icon="el-icon-search" @click="searchDate()"></el-button>-->
<!--    </div>-->

      <el-table
          :data="userArr.filter(data => !search || data.nickName.toLowerCase().includes(search.toLowerCase()))"
          :selectable="false"
          height="750"
      >
        <el-table-column type="index" label="编号"
                         width="100"></el-table-column>
        <el-table-column label="头像" width="150">
          <template slot-scope="scope">
            <!--scope.row代表当前遍历的数组中的对象-->
            <el-avatar :size="70" :src="scope.row.icon"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickName" width="100"></el-table-column>
        <el-table-column label="账号" prop="email" width="200"></el-table-column>
        <el-table-column label="工作" prop="job" width="100"></el-table-column>
        <el-table-column label="地区" prop="address" width="300"></el-table-column>
        <el-table-column label="联系电话" prop="tel" width="150"></el-table-column>

        <el-table-column label="操作"  fixed="right"  width="200">
          <template slot-scope="scope">
            <el-switch
                style="display: block"
                v-model="disabled[scope.$index]"
                @click="setCurrent(scope.$index,scope.raw)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="解除"
                inactive-text="禁用">
            </el-switch>
          </template>
        </el-table-column>


        <el-table-column align="right"  fixed="right" width="200">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
          </template>
          <!--scope代表每行对应的数据里面的index属性代表下标,
          里面的row代表每行对应的数组中的对象-->
          <template slot-scope="scope">
            <!--confirm确认事件-->

            <el-popconfirm @confirm="userDelete(scope.$index, scope.row)"
                           title="确定删除这个用户吗?"
                           >
              <el-button size="mini"
                         type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
import {getUserById} from "@/api/admin_api";

export default {
  name: "user-list",
  data(){
    return{
      userArr:[
        // {icon:require('@/assets/img/用户1号.jpg'),nickName:'user1',email:'1111@qq.com',job:'',address:'云南省昆明市',tel:'2022-06-15'},
        // {img:require('@/assets/img/用户2号.jpg'),nickname:'user2',name:'1112@qq.com',role:'用户2',sex:'男',address:'江苏省淮阴市',createTime:'2022-06-22',enable:'封禁'},
        // {img:require('@/assets/img/用户3号.jpg'),nickname:'user3',name:'1113@qq.com',role:'用户3',sex:'女',address:'贵州省贵阳市',createTime:'2022-06-23',enable:'封禁'},
        // {img:require('@/assets/img/用户4号.jpg'),nickname:'user4',name:'1114@qq.com',role:'用户4',sex:'男',address:'四川省达州市',createTime:'2022-06-12',enable:'封禁'},
        // {img:require('@/assets/img/用户5号.jpg'),nickname:'user5',name:'1115@qq.com',role:'用户5',sex:'女',address:'四川省成都市',createTime:'2022-06-22',enable:'封禁'},
        // {img:require('@/assets/img/用户6号.jpg'),nickname:'user6',name:'1116@qq.com',role:'用户6',sex:'男',address:'湖南省湘乡市',createTime:'2022-06-21',enable:'封禁'},
        // {img:require('@/assets/img/用户7号.jpg'),nickname:'user7',name:'1117@qq.com',role:'用户7',sex:'女',address:'浙江省杭州市',createTime:'2022-06-05',enable:'封禁'},
        // {img:require('@/assets/img/用户8号.jpg'),nickname:'user8',name:'1118@qq.com',role:'用户8',sex:'男',address:'海南省海口市',createTime:'2022-05-01',enable:'封禁'},
        // {img:require('@/assets/img/用户9号.jpg'),nickname:'user9',name:'1119@qq.com',role:'用户9',sex:'女',address:'广西省桂林市',createTime:'2022-05-25',enable:'封禁'},
        // {img:require('@/assets/img/用户10号.jpg'),nickname:'user10',name:'11110@qq.com',role:'用户10',sex:'女',address:'广东省广州市',createTime:'2022-06-25'},
      ],
      search: '',
      value1:'',
      userId:[1,2,3,30,31,32,33,34,35,36,37,38,39,40,41,42,43,45,49, 66,67,68,69,70,71,72],
      disabled:[],
      userCopy:[],
    };
  },
  methods:{
    // 按日期搜索事件
    searchDate(){
      let _this = this;
      _this.userArr.forEach(function (item){
        _this.userCopy.push(item);
      })
      // _this.userArr = [];
      // _this.userCopy.forEach(function (item){
      //   if (item.==_this.value1){
      //
      //   }
      // })
    },

// 点击禁用事件
    setCurrent(index){

    },


    // 删除事件
    userDelete(index){
      this.userArr.splice(index,1);
    },

  },
  created() {
    let _this = this
    _this.userId.forEach(function (){
      _this.disabled.push(true);
    })
    _this.userId.forEach(function (item){
      getUserById(item).then((res)=>{
        _this.userArr.push(res.data.data)
      })
    })

  }
}
</script>

<style>


/*搜索按钮*/
.regDate .search_button{
  background: transparent;
  color: #DCDFE6;
  border: none;
  position: absolute;
  font-size: 20px;
  left: 620px;
  top: 18px;
}
.regDate .search_button:hover{
  color: #54b6ff;
}


.userList .el-table .cell{
  text-align: center;
}



</style>